<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('edit-member-info')" label="更改代理资料" name="one">
        <edit-member-info
          v-show="activeTab === 'one'"
          :edit-able="true"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('reset-name-bank')" name="two" label="重置姓名及银行卡">
        <edit-bank-card
          v-show="activeTab === 'two'"
        />
      </el-tab-pane>
      <!--<el-tab-pane name="three" label="更改代理域名">-->
      <!--<edit-agency-url-->
      <!--v-show="activeTab === 'three'"-->
      <!--/>-->
      <!--</el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
  import EditBankCard from '@/views/member/detail/editBankCard'
  import EditAgencyUrl from '@/views/agency/detail/editAgencyUrl'
  import EditMemberInfo from '@/views/member/detail/editMemberInfo'

  export default {
    name: "agency-edit-dialog",
    components: {EditMemberInfo, EditBankCard, EditAgencyUrl},
    data() {
      return {
        activeTab: 'one',
      }
    },
    mounted(){
      this.activeTab = this.roleCheck('edit-member-info') ? 'one' : 'two';
    },
    methods: {
      changeTab(tab) {
        this.activeTab = tab.name
      }
    },

  }

</script>
<style lang="scss" scoped>
  .box-card {
    margin-bottom: 20px;
  }

</style>
